<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字识别</title>
  <link rel="stylesheet" href="../static/index.css">
  <script src="../static/vue.js"></script>
  <link rel="stylesheet" href="../static/element_index.css">
  <script src="../static/index.js"></script>
  <script src="../static/axios.min.js"></script>
</head>
<style>
  .exit {
    position: absolute; top:0; left:20px; font-size:16px; cursor: pointer;
    display: inline-block;
    width: 50px;
    height: 50px;
    background:#66b1ff;
    text-align: center;
    line-height: 50px;
    color: white;
    border-radius: 50%;
  }
</style>
<body>
  <div id="app">
    <p class="exit"  v-on:click="returns">返回</p>
    <div class="home">
      <div>
        <p v-if="texts" style="color: red; font-size: 20px;" v-text="texts"></p>
        <img class="imgs" v-bind:src="srcs" alt="" style="display: inline-block;
        width: 50%;
        heighe: 50%;
        margin: 0 auto;">
        <el-input placeholder="请输入内容" v-model="urls">
          <template slot="prepend">文字图片地址</template>
        </el-input>
        <el-button type="primary" round v-on:click="getTextData">提交</el-button>
        
      </div>
      
    </div>
  </div>

</body>
<script>
  var vm = new Vue({
    el: "#app",
    data() {
      return {
        urls: "",
        srcs: "data:image/jpg;base64,",
        texts: ""
      }
    },
    methods: {
      getTextData() {
        axios.get("http://127.0.0.1:8000/textdata", { params: { img: this.urls } }).then(rep => {
          this.texts = rep.data.values
          this.srcs = "data:image/jpg;base64,"
          this.srcs += rep.data.imgbase64
        })
      },
      returns() {
        window.location.href = "http://chikei0916.pythonanywhere.com/";
      }
    }
  })
</script>

</html>